<template>
  <div>
    <div class="toxicity-con flex-center-column">
      <el-input
        v-if="this.$store.state.isPhone"
        placeholder="Search"
        v-model="searchValue"
        class="input-search"
        clearable
        @keyup.enter.native="goSearch"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="goSearch"
        ></el-button>
      </el-input>
      <div class="title-con flex-center">
        <div class="left flex-center-start">Data</div>
        <div class="right flex-between">
          <div>Toxicity Category</div>
          <el-input
            placeholder="Search"
            v-model="searchValue"
            class="input-search"
            size="small"
            clearable
            @keyup.enter.native="goSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="goSearch"
            ></el-button>
          </el-input>
        </div>
      </div>
      <el-tabs @tab-click="tabClick" v-model="choosedTab" :tab-position="isPhone ? 'top' : 'left'">
        <el-tab-pane
          v-for="item in tabsItems"
          :key="item.id"
          :label="item.category"
          :idx="item.id"

        ></el-tab-pane>
        <!-- <el-tab-pane label="Systematic Toxicity"></el-tab-pane>
        <el-tab-pane label="Carcimgenity"></el-tab-pane>
        <el-tab-pane label="Cadiotoxicity"></el-tab-pane>
        <el-tab-pane label="Systematic Toxicity"></el-tab-pane>
        <el-tab-pane label="Carcimgenity"></el-tab-pane>
        <el-tab-pane label="Cadiotoxicity"></el-tab-pane>
        <el-tab-pane label="Systematic Toxicity"></el-tab-pane> -->
        <slot class="tab-right">
          <el-table
            :data="tableData"
            stripe
            class="right-table"
          >
            <el-table-column
              prop="category"
              label="Endpoints"
              sortable
              min-width="130"
            >
            </el-table-column>
            <el-table-column
              prop="descriptions"
              label="descriptions"
              sortable
              min-width="130"
            >
            </el-table-column>
            <el-table-column
              prop="source"
              label="source"
              sortable
              min-width="130"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="Number of"
              sortable
              width="130"
            >
            </el-table-column>
            <!-- <el-table-column prop="address" label="Sowce" sortable>
            </el-table-column>
            <el-table-column prop="address" label="Model" sortable>
            </el-table-column> -->
            <el-table-column
              prop="Details"
              label="Details"
              align="center"
              :width="isPhone ? '60px' : '130px'"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Details"
                  placement="bottom"
                >
                  <div class="detail-icon" @click="goDetail(scope)"></div>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :pageNo="pageNo"
            :total="total"
            :pageSize="pageSize"
            @handleCurrentChange="handleCurrentChange"
          />
        </slot>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
export default {
  components: {
    Pagination,
  },
  computed: {
    isPhone() {
      return this.$store.state.isPhone;
    },
  },
  data() {
    return {
      searchValue: "",
      tabsItems: [],
      choosedTab: "", // 当前tab
      pageNo: 1, // 分页
      total: 0,
      pageSize: 10,
      tableData: [],
    };
  },
  created() {
    this.$api.getToxicityBigCategoryInfo().then((res) => {
      this.tabsItems = res;
    });
  },
  mounted() {
    if(this.$route.query.idx){
      this.choosedTab = this.$route.query.idx
      this.getToxicityCategoryInfo({});
    }else{
      this.choosedTab = res[0].id;
      this.getToxicityCategoryInfo({});
    }
  },
  methods: {
    goDetail(scope) {
      this.$router.push({
        path: "/collectionDtail",
        query: { toxicityId: scope.row.id },
      });
    },
    tabClick(tab) {
      this.pageNo = 1
      this.choosedTab = tab.$attrs.idx;
      this.getToxicityCategoryInfo({});
    },
    getToxicityCategoryInfo({ orderBy, sort }) {
      this.$api
        .getToxicityCategoryInfo({
          pid: this.choosedTab,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          orderBy: orderBy ? orderBy : "",
          search: this.searchValue,
          sort: sort,
        })
        .then((res) => {
          this.total = res.total;
          this.tableData = res.list;
        });
    },
    handleCurrentChange(data) {
      this.pageNo = data;
      this.getToxicityCategoryInfo({});
    },
    goSearch() {
      this.getToxicityCategoryInfo({});
    },
  },
};
</script>

<style lang="scss" scoped>
.toxicity-con {
  margin-top: 24px;
  .title-con {
    font-weight: bold;
    color: #17233d;
    font-size: 20px;
    .left {
      height: 70px;
      background: #ffffff;
      width: 210px;
      margin-right: 10px;
      padding-left: 14px;
      // padding: 30px 0 30px 10px;
    }
    .right {
      height: 70px;
      background: #ffffff;
      width: 1114px;
      padding-left: 20px;
    }
  }
}

// element
::v-deep {
  .el-tabs {
    height: auto !important;
    position: relative;
    .tab-right {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 1114px;
    }
    .detail {
      .cell {
        text-align: center;
      }
    }
    .detail-icon {
      margin: 0 auto;
      width: 17px;
      height: 18px;
      background-image: url(~@/assets/img/icon_details.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
  .el-tabs__header {
    width: 210px;
    margin-right: 10px;
    background: #ffffff;
    .el-tabs__nav {
      margin-left: 6px;
      padding-bottom: 20px;
      &.is-top {
        margin-left: 0px;
        padding-bottom: 0px;
      }
    }
    .el-tabs__item.is-left {
      text-align: left;
      // height: 32px;
      height: auto;
      line-height: 32px;
      padding: 0 12px;
    }
    .el-tabs__item.is-top {
      // text-align: left;
      padding: 0px 20px 0px 20px;
      height: auto;
    }
    .el-tabs__item.is-active {
      background: #f3efff;
    }
  }
  .el-tabs__content {
    width: 1114px;
    height: 0;
    background: #ffffff;
    height: 100%;
    margin-bottom: 40px;
  }
  .input-search {
    width: 400px;
    margin-right: 30px;
    .el-input-group__append {
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      color: white;
      border: none;
    }
  }
  .el-tabs__item {
    line-height: 20px;
    white-space: normal;
  }
  .el-tabs--left .el-tabs__active-bar.is-left {
    height: 32px;
  }
  // .el-input__inner {
  //   border: 1PX solid #dcdfe6;
  // }
  .el-table__header-wrapper {
    thead {
      th {
        background: #f3efff;
        color: #17233d;
      }
    }
  }
  .right-table {
    width: 96%;
    margin: auto;
  }
}

// 响应式设计

@media screen and (max-width: 768px) {
  ::v-deep .toxicity-con {
    .title-con {
      display: none;
    }
    .right-table {
      width: 100%;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      width: 100vw;
      margin-left: auto;
      margin-right: auto;
    }
    .el-tabs {
      overflow: hidden;
      height: auto !important;
      position: relative;
      .el-tabs__item {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .tab-right {
        position: absolute;
        top: 30px;
        width: 100vw;
        background: red;
      }
    }
    .el-tabs__header {
      width: 100vw;
      background: #ffffff;
    }

    .input-search {
      width: 100vw;
      padding-left: 20px;
      padding-right: 20px;
      margin-right: 0px;
      margin-bottom: 24px;
    }
    
  }
}
</style>
